[#ftl]
 [@define "agile.form._LabelMixin" "agile._Component,agile._Resizable" ]
	category:"Label Component"	
	,widgetName:"Label"
	[#assign templateString][#compress]
		<div class='agileComponent agile{this_widgetName}'> 			
 			<div data-dojo-attach-point="delegate" data-dojo-type="dijit.InlineEditBox" data-dojo-props="renderAsHtml:true,editor:'{parameters.editor}'">{parameters.value}</div> 			
		</div>
	[/#compress][/#assign]
	,templateString:"${templateString?js_string}"	
	,templateMap:{
		dojo:"<div {id} {html-style}>{innerWidets}</div>"
		,agile:"<div data-dojo-type='{declaredClass}' data-dojo-props='{style-props}'>{innerWidets}</div>"
	}
	,resizeAxis:"xy"	
	,attributes:agile.delegate(agile._Component.prototype.attributes,{
		renderAsHtml:lang.mixin({},agile.BooleanMetadata,{
			label:"i18n_render_as_html",_readOnly:true
			,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){	
				widget.delegate.set(name,value);
				widget.delegate.set("value",widget.delegate.get("value"));
//				this.delegate.displayNode.innerHTML = widget.metadata("parameters.value").replace(/\n/g,"<br>");
				widget.metadata(this.metadataCategory+"."+name,value);
			}			
		})
		,value:	lang.mixin({},agile.MultiTextMetadata,{
			label:"i18n_label",renderAsInnerHtml:true
			,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){
				value = value.replace(/<(\s*br\s*\/?\s*)>/gi,"&lt;$1&gt;");
//				console.log("@@@@@@@@@value changed=",value);
				widget.delegate.set("value",value);
//				widget.metadata(this.metadataCategory+"."+name,value);
			}
			,toRenderAsInnerHtml:function(value,widget,sourceType){
				if(value) {
					value = value.replace(/\n/g,"<br>");
				}
				return value;
			}
		})
	})	
	,initDefaultMetadata:function(){
//		console.log(this.declaredClass,"[_LabelMixin]initDefaultMetadata....");
		this.metadata("parameters.renderAsHtml",true);	
		this.metadata("parameters.editor",'dijit.form.SimpleTextarea');
		this.metadata("parameters.value","");
		this.metadata("style.width","100px");
		this.metadata("style.height","20px");
	}
	,constructor:function(params, node){
		//console.log(this.declaredClass,"##constructor params=",params,",node=",node);
		if(node){
			this.metadata("parameters.value",node.innerHTML?node.innerHTML.replace(/<br\/?>/gi,"\n"):"");
		}else{
			//this.metadata("parameters.value","");
		}
	}
	,init:function(){
		if(this._initLabelMixin){return true;} this._initLabelMixin = true;
//		console.log(this.declaredClass,"[_LabelMixin:init]style=",this.metadata("style"));
//		style.set(this.delegate.domNode,{width:this.metadata("style.width"),height:this.metadata("style.height")});
		this.delegate.set("width",this.metadata("style.width"));
		this.delegate.set("height",this.metadata("style.height"));
		
		var newValue = this.metadata("parameters.value");
		if(newValue && this.metadata("parameters.renderAsHtml")){
			this.delegate.displayNode.innerHTML = newValue.replace(/\n/g,"<br>");
		}
		this.delegate.watch("value",lang.hitch(this,function(name,old,newValue){	
//			console.log("#########value changed=",newValue);
			newValue = newValue.replace(/<(\s*b\s*r\/?\s*)>/gi,"&lt;$1&gt;");
			topic.publish("agile.widget.changed",this.category,"value",newValue);					
			//this.metadata("parameters.value",newValue.replace(/\n/g,"<br/>"));
			this.metadata("parameters.value",newValue);			
			this.delegate.displayNode.innerHTML = newValue.replace(/\n/g,"<br>");
			//console.log("#########display value=",this.delegate.displayNode.innerHTML);
		}));

		aspect.after(this.delegate,"onMouseDown",lang.hitch(this,function(){
			if(!this._selected){
				topic.publish("agile.widget.selected",this);
			}			
		}));

		//this.resetInlineEditBox(this.delegate);
				
		this.own(		
				aspect.after(this.delegate,"edit",lang.hitch(this,function(){
					var editWidget = this.delegate.wrapperWidget.editWidget;
					if(!editWidget._initialized){
						on(editWidget, "keyDown",function(event){			
							event.stopPropagation();
						});
						on(editWidget, "keyUp",function(event){			
							event.stopPropagation();
						});
						editWidget._initialized = true;
						style.set(editWidget.domNode,{width:(this.dimension.width - 6) + "px",height:(this.dimension.height - 6) + "px"});
					}								
				}))	
				
				,aspect.after(this,"metadata",lang.hitch(this,function(name,value){//setter
					if(value != undefined && (name == "style.width" || name == "style.height")){
						name = name.replace("style.","");
						style.set(this.delegate.domNode,name,value);
						this.metadata("parameters."+name,value);
						
						if(this.delegate.wrapperWidget){
							var editWidget = this.delegate.wrapperWidget.editWidget;
							if(editWidget){
								style.set(editWidget.domNode,{width:(this.dimension.width - 6) + "px",height:(this.dimension.height - 6) + "px"});
							}
						}
					}
				}),true)
			);
		
	}
	,getResizableTargetContainer:function(){				
		return this.domNode;
	}
	,toHtml:function(params){
//		arguments[0] = true;
		params.cascade = true
		return this.inherited(arguments);
	}
[/@]

[@define "agile.form.Label" "agile.form._LabelMixin"]
	resizeAxis:"xy"
	,styleConstraints:agile.delegate(agile.form._LabelMixin.prototype.styleConstraints,{
		"width": {
			onValueChange:function(ownerWidget,name,htmlName,value){
			   style.set(ownerWidget.delegate.domNode,name,value);
			   //LabelField			   
			   if(ownerWidget.parent && ownerWidget.parent.declaredClass.indexOf("LabelField")>=0){
//				   console.log("ownerWidget.parent.declaredClass=",ownerWidget.parent.declaredClass);
				   ownerWidget.parent.postResize();	
			   }
		   }
		}
	})
	
[/@] 
